<template>
  <div class="chat-window">
    <div class="chat-header">
      <h3>聊天框</h3>
      <div class="chat-actions">
        <button class="action-btn" @click="toggleEmojiPicker">
          <i class="far fa-smile"></i>
        </button>
        <button class="action-btn">
          <i class="fas fa-cog"></i>
        </button>
      </div>
    </div>

    <div ref="messagesContainer" class="messages-container">
      <MessageItem
          v-for="message in messages"
          :key="message.id"
          :message="message"
          :is-current-user="message.userId === currentUser.id"
      />
    </div>

    <div class="message-input-container">
      <div v-if="showEmojiPicker" class="emoji-picker">
        <!-- 这里可以集成一个emoji选择器组件 -->
        <div class="emoji-grid">
          <span
              v-for="emoji in emojis"
              :key="emoji"
              @click="addEmoji(emoji)"
          >{{ emoji }}</span>
        </div>
      </div>

      <input
          v-model="newMessage"
          @keyup.enter="sendMessage"
          placeholder="Type your message..."
          class="message-input"
      />

      <button @click="sendMessage" class="send-button">
        <i class="fas fa-paper-plane"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'
import MessageItem from './MessageItem.vue'
import { useChat } from '../composables/useChat'

const {
  messages,
  newMessage,
  sendMessage,
  currentUser
} = useChat()

const messagesContainer = ref(null)
const showEmojiPicker = ref(false)
const emojis = ['😀', '😂', '❤️', '🔥', '🎮', '🏆', '👍', '👎']

const toggleEmojiPicker = () => {
  showEmojiPicker.value = !showEmojiPicker.value
}

const addEmoji = (emoji) => {
  newMessage.value += emoji
  showEmojiPicker.value = false
}

// 自动滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

watch(messages, scrollToBottom, { deep: true })
onMounted(scrollToBottom)
</script>

<style scoped>
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(26, 26, 46, 0.9);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(22, 33, 62, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-header h3 {
  margin: 0;
  color: white;
  font-size: 1.2rem;
}

.chat-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  background: transparent;
  border: none;
  color: #a5a5a5;
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.action-btn:hover {
  color: #4cc9f0;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.message-input-container {
  position: relative;
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 33, 62, 0.8);
}

.message-input {
  width: 90%;
  padding: 10px 15px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  outline: none;
}

.message-input:focus {
  background: rgba(255, 255, 255, 0.2);
}

.send-button {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #4cc9f0;
  cursor: pointer;
  font-size: 1rem;
}

.emoji-picker {
  position: absolute;
  bottom: 60px;
  left: 15px;
  width: calc(100% - 30px);
  background: rgba(26, 26, 46, 0.95);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.emoji-grid span {
  font-size: 1.5rem;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease;
}

.emoji-grid span:hover {
  transform: scale(1.2);
}
</style>
